<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // ES5 
    // var arr = [1,2,3];
    // var a = arr[0];
    // var b = arr[1];
    // var c = arr[2];


</script>
<script>
    // 解构赋值  
    // ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构 
    // 本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。


    // 数组解构 => 模式匹配,对应下标取值

    var arr = [1, 2, 3];

    // 完全解构(等号左边的结构和等号右边的结构完全一致)
    // var [a,b,c] = [1,2,3];
    // console.log(a,b,c);



    // 不完全解构(等号左边只能对应等号右边部分结构) 
    var [a, b, c] = [1, 2, 3, 4];
    console.log(a, b, c);

    var [ , ,c] = [1,2,3];
    console.log(c);

    // 解构不成功(等号左边的变量,在等号右边没有对应的值),默认返回undefined
    var [a, b, c, d] = [1, 2, 3];
    console.log(a, b, c, d);

    // 解构过程中,给参数设置默认值
    var [a, b, c, d = 0] = [1, 2, 3];
    // 等价于
    // d = d === undefined ? 0 : d;
    console.log(a, b, c, d);

    // 拓展应用
    // 数组解构 配合 扩展运算符 => Rest参数

    var [a, b,...list] = [1, 4, 7, 2, 5, 8, 3, 6, 9];
    console.log(a,b,list);
    //  a = 1
    //  b = 4
    //  ...list =  7, 2, 5, 8, 3, 6, 9    反推:  list = [ 7, 2, 5, 8, 3, 6, 9]

    // 注意:Rest参数在解构赋值时,必须是最后一个 否则会报错!
    // var [a, b,...list,c] = [1, 4, 7, 2, 5, 8, 3, 6, 9];
    // console.log(a,b,list);


    // 解构注意:
    // 如果等号的右边不是数组（或者严格地说，不是可遍历的结构），那么将会报错。
    // 可遍历的结构 (数组 伪数组,字符串,Map,Set)
    // let [foo] = 1;
    // let [foo] = false;
    // let [foo] = NaN;
    // let [foo] = undefined;
    // let [foo] = null;
    // let [foo] = {};


    // 解构高级:(多维数组解构)
    // 小技巧: 如果解构之后的变量依旧是一个数组,可以对该数组进行二次解构
    var arr = [1, 2, [3, 4, [5]]];

    // (1) 拆分解构
    var [a, b, c] = [1, 2, [3, 4, [5]]]
    // a = 1
    // b = 2
    // c = [3, 4, [5]]

    var [c1, c2, c3] = c;
    // c1 = 3
    // c2 = 4
    // c3 = [5]

    var [c31] = c3;
    console.log(a, b, c);
    console.log(c1, c2, c3);
    console.log(c31);


    // (2) 一步到位
    var [a, b, [c1, c2, [c31]]] = [1, 2, [3, 4, [5]]];
    console.log(a, b, c1, c2, c31);

    var [a, b, [c, d, [e]]] = [1, 2, [3, 4, [5]]];
    console.log(a, b, c, d, e);

    // 交换两个变量的值
    // var a = 1;
    // var b = 2;
    // var [a,b] = [b,a];
    // console.log(a,b);


    var [a,b] = "hello";
    console.log(a,b);


















</script>

</html>